<template>
  <div class="map-box">
    <div id="map"></div>
    <div class="input-card" style="margin-top: 20px;">
      通用设置：
      <input type="checkbox" class="btn" id="angleFixed" />
      <label for="angleFixed">是否固定角度</label>
      <input type="checkbox" class="btn" id="isDisplay" checked />
      <label for="isDisplay">是否显示轨迹线（针对历史轨迹）</label>
    </div>
    <div class="input-card" style="margin-top: 20px;">
    <label for="speed1">
      speed:&nbsp;
      <input id="speed1" type="range" min="10" max="999" step="10" value="100" />
    </label>
    <label for="distance1">
      distance:&nbsp;
      <input id="distance1" type="range" min="0" max="1000" step="10" value="0" />
    </label>
    <div style="margin-top: 20px;">
      小车1(历史双轨迹)
      <input type="button" class="btn" value="开始动画" id="start1" />
      <input type="button" class="btn" value="暂停动画" id="pause1" />
      <input type="button" class="btn" value="继续动画" id="resume1" />
      <input type="button" class="btn" value="停止动画" id="stop1" />
    </div>
    </div>
    <div class="input-card" style="margin-top: 20px;">
      <label for="speed2">
        speed:&nbsp;
        <input id="speed2" type="range" min="10" max="999" step="10" value="100" />
      </label>
      <label for="distance2">
        distance:&nbsp;
        <input id="distance2" type="range" min="0" max="1000" step="10" value="0" />
      </label>
      <div style="margin-top: 20px;">
        小车2(历史单轨迹)
        <input type="button" class="btn" value="开始动画" id="start2" />
        <input type="button" class="btn" value="暂停动画" id="pause2" />
        <input type="button" class="btn" value="继续动画" id="resume2" />
        <input type="button" class="btn" value="停止动画" id="stop2" />
      </div>
    </div>
    <div class="input-card" style="margin-top: 20px;">
      <div style="margin-top: 20px;">
        小车3(实时轨迹)
        <input type="button" class="btn" value="开始动画" id="start3" />
      </div>
    </div>
  </div>
</template>
<script setup>
  import { onMounted } from 'vue'
  const loadScript = (url) => {
    return new Promise((resolve, reject) => {
      const script = document.createElement("script");
      script.src = url;
      script.onload = resolve;
      script.onerror = reject;
      document.head.appendChild(script);
    });
  }
  const scripts = [
    'http://1.95.157.217/wmap/wmap.umd.js'
  ]
  async function loadScripts (scripts) {
    for (const url of scripts) {
      try {
        await loadScript(url);
      } catch (err) {
        console.error(`${url} failed:`, err);
      }
    }
  }
  onMounted(() => {
    loadScripts(scripts).then(() => {
      const speedInput1 = document.getElementById('speed1')
      const distanceInput1 = document.getElementById('distance1')

      const speedInput2 = document.getElementById('speed2')
      const distanceInput2 = document.getElementById('distance2')

      const startButton1 = document.getElementById('start1')
      const startButton2 = document.getElementById('start2')
      const pauseButton1 = document.getElementById('pause1')
      const resumeButton1 = document.getElementById('resume1')
      const stopButton1 = document.getElementById('stop1')
      const angleFixed = document.getElementById('angleFixed')

      const pauseButton2 = document.getElementById('pause2')
      const resumeButton2 = document.getElementById('resume2')
      const stopButton2 = document.getElementById('stop2')
      const isDisplay = document.getElementById('isDisplay')

      const startButton3 = document.getElementById('start3')
      const map = new WMap.Map('map', {
        center: [116.281149, 39.798184],
        zoom: 16,
        minZoom: 3,
        maxZoom: 18
      })

      const marker1 = new WMap.Marker({
        map,
        position: [116.268935, 39.797761],
        icon: 'https://webapi.amap.com/images/car.png',
        offset: [-26, -13],
        angle: -90
      })

      marker1.on('click', e => {
        console.log(e.target)
      })

      const marker2 = new WMap.Marker({
        map,
        position: [116.281149, 39.798184],
        icon: 'https://webapi.amap.com/images/car.png',
        offset: [-26, -13],
        angle: -90
      })

      const marker3 = new WMap.Marker({
        map,
        position: [116.281149, 39.788184],
        icon: 'https://webapi.amap.com/images/car.png',
        offset: [-26, -13],
        angle: -90
      })

      const lineArr1 = [];
      // 随机生成10个坐标[113~119, 36~42]
      const minRange = 0
      const maxRange = 3
      for (let i =0; i < 10; i++) {
        const lng = Number((GetRandomNum(minRange, maxRange)+Math.random() + 116).toFixed(6));
        const lat = Number((GetRandomNum(minRange, maxRange)+Math.random() + 39).toFixed(6));
        lineArr1.push([lng, lat]);
      }
      function GetRandomNum(Min, Max) {   
        let Range = Max - Min;   
        let Rand = Math.random();   
        return(Min + Math.round(Rand * Range));   
      }

      const lineArr2 = [
        [116.281149, 39.798184], // 9
        [116.281573, 39.797997], // 10
        [116.281863, 39.797846], // 11
        [116.282072, 39.797718], // 12
        [116.282362, 39.797718], // 13
        [116.283633, 39.798935], // 14
        [116.28367, 39.798968], // 15
        [116.284648, 39.799861], // 16
        [116.2889679286499, 40.003822062536884], // 17
        [116.29177741676331, 40.00160192330932], // 18
        [116.28720693260194, 39.9987695105896] // 19
      ]

      const lineArr3 = [
        [103.378456, 30.370259],
        [103.378478, 30.370267],
        [103.378691, 30.370385],
        [103.378867, 30.370467],
        [103.379042, 30.370517],
        [103.379156, 30.370544],
        [103.379407, 30.370662],
        [103.379606, 30.370721],
        [103.380017, 30.370785],
        [103.381845, 30.371137],
        [103.382043, 30.371175],
        [103.38247, 30.371256],
        [103.383019, 30.371388],
        [103.383437, 30.371514],
        [103.384397, 30.371879],
        [103.385586, 30.372397],
        [103.386265, 30.37267],
        [103.387201, 30.373052],
        [103.38785, 30.373372],
        [103.388169, 30.373552],
        [103.388169, 30.373552],
        [103.388847, 30.373829],
        [103.389496, 30.374035],
        [103.39009, 30.37418],
        [103.390479, 30.374238],
        [103.390874, 30.374288],
        [103.391286, 30.374307],
        [103.392003, 30.374269],
        [103.393024, 30.374187],
        [103.394335, 30.374109],
        [103.395173, 30.37406],
        [103.395975, 30.373903],
        [103.396927, 30.373657],
        [103.397293, 30.373631],
        [103.397469, 30.373644],
        [103.397705, 30.373673],
        [103.398223, 30.373922],
        [103.399801, 30.374875],
        [103.400991, 30.375625],
        [103.403118, 30.376967],
        [103.40408, 30.377843],
        [103.404324, 30.378087],
        [103.404705, 30.378434],
        [103.405033, 30.378699],
        [103.405323, 30.378877],
        [103.406718, 30.37965],
        [103.406779, 30.379688],
        [103.407024, 30.379833],
        [103.408984, 30.380896],
        [103.409213, 30.381018],
        [103.409877, 30.381481],
        [103.410442, 30.381692],
        [103.410808, 30.381778],
        [103.410945, 30.381797],
        [103.411449, 30.381805],
        [103.411861, 30.381778],
        [103.41257, 30.381771],
        [103.413074, 30.381745],
        [103.413554, 30.381788],
        [103.413913, 30.381896],
        [103.414447, 30.382245],
        [103.414615, 30.382358],
        [103.414966, 30.382791],
        [103.415309, 30.383147],
        [103.415568, 30.383287],
        [103.416172, 30.383475],
        [103.416897, 30.383612],
        [103.417484, 30.38383],
        [103.417683, 30.383951],
        [103.418057, 30.384355],
        [103.418316, 30.385063],
        [103.418598, 30.385631],
        [103.418881, 30.386382],
        [103.419049, 30.386756],
        [103.419164, 30.386935],
        [103.419164, 30.386935],
        [103.420469, 30.388523],
        [103.421339, 30.389654],
        [103.421774, 30.390434],
        [103.421927, 30.390682],
        [103.422659, 30.39186],
        [103.422964, 30.392176],
        [103.423301, 30.39251],
        [103.424384, 30.393223],
        [103.425148, 30.393578],
        [103.426347, 30.394185],
        [103.428569, 30.396277],
        [103.429684, 30.398014],
        [103.430845, 30.399358],
        [103.430952, 30.3996],
        [103.431249, 30.400087],
        [103.431769, 30.400965],
        [103.431822, 30.401108],
        [103.432051, 30.401677],
        [103.432754, 30.403462],
        [103.432869, 30.403676],
        [103.432998, 30.40386],
        [103.433204, 30.404018],
        [103.433572, 30.404175],
        [103.433625, 30.404182],
        [103.433915, 30.404235],
        [103.434412, 30.40423],
        [103.434953, 30.404177],
        [103.436153, 30.404223],
        [103.43694, 30.404332],
        [103.437284, 30.404402],
        [103.437399, 30.404427],
        [103.437283, 30.405032],
        [103.437062, 30.406301],
        [103.437009, 30.406606],
        [103.436871, 30.406678],
        [103.436237, 30.406605],
        [103.43325, 30.406192],
        [103.432625, 30.4061],
        [103.432181, 30.406031],
        [103.431998, 30.406008],
        [103.431013, 30.40592],
        [103.430638, 30.405882],
        [103.430638, 30.405882],
        [103.429523, 30.405708],
        [103.428568, 30.405556],
        [103.427851, 30.405454],
        [103.426881, 30.405299],
        [103.425972, 30.405138],
        [103.425385, 30.405011],
        [103.425385, 30.405011],
        [103.425255, 30.405028],
        [103.424995, 30.405032],
        [103.424812, 30.405066],
        [103.424667, 30.405114],
        [103.424545, 30.405178],
        [103.424445, 30.405239],
        [103.424362, 30.405319],
        [103.424285, 30.40541],
        [103.424224, 30.4055],
        [103.424171, 30.405597],
        [103.424133, 30.405755],
        [103.424117, 30.405847],
        [103.424125, 30.406089],
        [103.424178, 30.406345],
        [103.424163, 30.406454],
        [103.42443, 30.407117],
        [103.424514, 30.407354],
        [103.424842, 30.408229],
        [103.425247, 30.409408],
        [103.425598, 30.410578],
        [103.425896, 30.41169],
        [103.426133, 30.412652],
        [103.426285, 30.413279],
        [103.426407, 30.413811],
        [103.426537, 30.414437],
        [103.426819, 30.416285],
        [103.426865, 30.416598],
        [103.426949, 30.417355],
        [103.427056, 30.418494],
        [103.427124, 30.419241],
        [103.427353, 30.423643],
        [103.427934, 30.434625],
        [103.428102, 30.437915],
        [103.428109, 30.439226],
        [103.428101, 30.439928],
        [103.428063, 30.440735],
        [103.428002, 30.441645],
        [103.427864, 30.442905],
        [103.427697, 30.444036],
        [103.427399, 30.445606],
        [103.427391, 30.445667],
        [103.427108, 30.446806],
        [103.42675, 30.448098],
        [103.426383, 30.449255],
        [103.425413, 30.45186],
        [103.425145, 30.452646],
        [103.424916, 30.453381],
        [103.424764, 30.453925],
        [103.424642, 30.454461],
        [103.424405, 30.455541],
        [103.424291, 30.456213],
        [103.424237, 30.456587],
        [103.42358, 30.460775],
        [103.423443, 30.461668],
        [103.423374, 30.462459],
        [103.423336, 30.462942],
        [103.423374, 30.463488],
        [103.42342, 30.464076],
        [103.423489, 30.46453],
        [103.42358, 30.464934],
        [103.423702, 30.465373],
        [103.423901, 30.465941],
        [103.424114, 30.466436],
        [103.424297, 30.466804],
        [103.424542, 30.467232],
        [103.42474, 30.467573],
        [103.425252, 30.468366],
        [103.42881, 30.473832],
        [103.429177, 30.474422],
        [103.430154, 30.476124],
        [103.430796, 30.477346],
        [103.431071, 30.477929],
        [103.431384, 30.478562],
        [103.431765, 30.479437],
        [103.433613, 30.483441],
        [103.434431, 30.48519],
        [103.434676, 30.485691],
        [103.434943, 30.48619],
        [103.435279, 30.486736],
        [103.435554, 30.487119],
        [103.435875, 30.487528],
        [103.436165, 30.487866],
        [103.436463, 30.488171],
        [103.436784, 30.488475],
        [103.437105, 30.488759],
        [103.437486, 30.489066],
        [103.437869, 30.489338],
        [103.438197, 30.489559],
        [103.438526, 30.489757],
      ]

      const polyline1 = new WMap.Polyline({
        map,
        mode: 'all', // 默认为all
        path: lineArr1,
        showDir: true, // 是否显示箭头
        strokeColor: '#28F', // 历史轨迹线颜色
        activeStrokeColor: 'green', // 活跃历史轨迹线颜色
        strokeWeight: 6, // 线宽
        segmentLength: 10, // 最小子路径长度
        units: 'meters' // 最小子路径单位
      })
      const polyline2 = new WMap.Polyline({
        map,
        mode: 'history',
        path: lineArr2,
        showDir: true, // 是否显示箭头
        strokeColor: '#28f', // 历史轨迹线颜色
        strokeWeight: 6 // 线宽
      })
      // 实时轨迹线
      const polyline3 = new WMap.Polyline({
        map,
        mode: 'real',
        activeStrokeColor: 'green', // 活跃历史轨迹线颜色
        strokeWeight: 6 // 线宽
      })

      marker1.on('moving', function (e) {
        e.target.angleFixed = angleFixed.checked
        polyline1.setPath(e.passedPath)
        distanceInput1 && (distanceInput1.value = marker1.getRatio() * 10)
      })

      marker2.on('moving', function (e) {
        e.target.angleFixed = angleFixed.checked
        distanceInput2 && (distanceInput2.value = marker2.getRatio() * 10)
      })

      function startAnimation1() {
        marker1.moveAlong(lineArr1, angleFixed.checked, Number(speedInput1 ? speedInput1.value : 100)) // 历史轨迹
      }

      function startAnimation2() {
        marker2.moveAlong(lineArr2, angleFixed.checked, Number(speedInput2 ? speedInput2.value : 100)) // 历史轨迹
      }

      isDisplay && (
        isDisplay.onchange = e => {
          polyline1?.setVisible(e.target.checked)
          polyline2?.setVisible(e.target.checked)
        }
      )

      speedInput1 &&
        (speedInput1.onchange = e => {
          marker1.updateMoveSpeed(e.target.value)
        })

      speedInput2 &&
        (speedInput2.onchange = e => {
          marker2.updateMoveSpeed(e.target.value)
        })

      distanceInput1 &&
        (distanceInput1.onchange = e => {
          console.log(e.target.value / 1000)
          marker1.updateMoveDistance(e.target.value / 1000)
          polyline1.updatePassedPath(marker1.getMoveIndex())
        })

      distanceInput2 &&
        (distanceInput2.onchange = e => {
          marker2.updateMoveDistance(e.target.value / 1000)
        })

      function pauseAnimation1() {
        marker1.pauseMove()
      }

      function resumeAnimation1() {
        marker1.resumeMove()
      }

      function stopAnimation1() {
        startButton1.textContent = 'Start Animation'
        marker1.stopMove()
      }
      function pauseAnimation2() {
        marker2.pauseMove()
      }

      function resumeAnimation2() {
        marker2.resumeMove()
      }

      function stopAnimation2() {
        startButton2.textContent = 'Start Animation'
        marker2.stopMove()
      }
      // 开始动画
      startButton1.addEventListener('click', function () {
        if (polyline1.getVirtuaPath().length) {
          startAnimation1()
        } else {
          console.warn('虚拟轨迹正在初始化中');
        }
      })
      startButton2.addEventListener('click', function () {
        startAnimation2()
      })
      startButton3.addEventListener('click', () => {
        map.panTo(lineArr3[0], { duration: 0 })
        lineArr3.map((item, i) => {
          setTimeout(() => {
            marker3.move(polyline3, item)
            map.panTo(item, { duration: 0 })
          }, i * 1000)
        })
      })
      // 暂停动画
      pauseButton1.addEventListener('click', function () {
        pauseAnimation1()
      })
      // 继续动画
      resumeButton1.addEventListener('click', function () {
        resumeAnimation1()
      })
      // 停止动画
      stopButton1.addEventListener('click', function () {
        stopAnimation1()
      })

      // 暂停动画
      pauseButton2.addEventListener('click', function () {
        pauseAnimation2()
      })
      // 继续动画
      resumeButton2.addEventListener('click', function () {
        resumeAnimation2()
      })
      // 停止动画
      stopButton2.addEventListener('click', function () {
        stopAnimation2()
      })
    })
  })
</script>
<style>
.map-box{
  height: calc(100vh - 20px)
}
#map {
  height: calc(100% - 100px);
}
</style>